<template>
	<div class="scroll-wrapper" ref="wrapper">
		<div class="scroll-content">
			<div v-if="!errorShow">
				<detail-swiper :picDatas="detailDatas.pics"></detail-swiper>
				<detail-food v-if="field === 'food'" :name="detailDatas.name" :starNum="Number(detailDatas.star)"
					:score="detailDatas.score" :address="detailDatas.address" :price="Number(detailDatas.default_price)"
					:openDateTime="detailDatas.open_datetime" :recom="detailDatas.recom"
					:commentKeyword="detailDatas.comment_keyword"></detail-food>

				<detail-view v-if="field === 'view'" :name="detailDatas.name" :starNum="Number(detailDatas.star)"
					:score="detailDatas.score" :address="detailDatas.address" :price="Number(detailDatas.default_price)"
					:openDateTime="detailDatas.open_datetime" :tip="detailDatas.tip" :intro="detailDatas.intro"
					:ticketInfo="detailDatas.ticket_info"></detail-view>

				<detail-hotel v-if="field === 'hotel'" :name="detailDatas.name" :starNum="Number(detailDatas.star)"
					:score="detailDatas.score" :address="detailDatas.address" :price="Number(detailDatas.default_price)"
					:service="detailDatas.service"></detail-hotel>

				<detail-massage v-if="field === 'massage'" :name="detailDatas.name" :starNum="Number(detailDatas.star)"
					:score="detailDatas.score" :address="detailDatas.address" :price="Number(detailDatas.default_price)"
					:openDateTime="detailDatas.open_datetime" :commentKeyword="detailDatas.comment_keyword"
					:service="detailDatas.service"></detail-massage>

				<detail-ktv v-if="field === 'ktv'" :name="detailDatas.name" :starNum="Number(detailDatas.star)"
					:score="detailDatas.score" :address="detailDatas.address" :price="Number(detailDatas.default_price)"
					:service="detailDatas.service"></detail-ktv>
			</div>

			<error :errorShow="errorShow"></error>
		</div>
	</div>
</template>

<script>
import BetterScroll from 'better-scroll';

import DetailSwiper from './Sub/Swiper';
import DetailFood from './Detail/Food';
import DetailView from './Detail/View';
import DetailHotel from './Detail/Hotel';
import DetailMassage from './Detail/Massage';
import DetailKtv from './Detail/Ktv';
import Error from './Sub/Error';

import { DetailModel } from 'models/detail';

import tools from 'utils/tools.js';

export default {
	name: 'DetailScrollWrapper',
	data() {
		return {
			field: '',
			id: 0,
			currentField: '',
			currentId: 0,
			detailDatas: {},
			errorShow: true
		}
	},
	components: {
		DetailSwiper,
		DetailFood,
		DetailView,
		DetailHotel,
		DetailMassage,
		DetailKtv,
		Error
	},
	mounted() {
		this.scroll = new BetterScroll(this.$refs.wrapper);
		this.field = this.$route.query.field;
		this.id = this.$route.query.id;
		this.getDetail(this.field, this.id);
	},
	activated() {
		this.currentField = this.$route.query.field;
		this.currentId = this.$route.query.id;

		if (this.currentField !== this.field || this.currentId !== this.id) {
			this.field = this.currentField;
			this.id = this.currentId;

			this.getDetail(this.field, this.id);
		}
	},
	methods: {
		getDetail(field, id) {
			const detailModel = new DetailModel();

			detailModel.getDetail(field, id).then((res) => {
				if (res && res.status === 0) {
					const data = res.data;

					this.errorShow = false;
					data.pics && (data.pics = tools.jsonToArr(data.pics));
					data.comment_keyword && (data.comment_keyword = tools.strToArr(data.comment_keyword));
					data.recom && (data.recom = tools.replaceToSpace(data.recom));
					data.service && (data.service = tools.jsonToArr(data.service));

					this.detailDatas = data;
				} else {
					this.errorShow = true;
					console.log({
						statusCode: res.status,
						errorMsg: res.error
					});
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>

</style>
